<template>
  <!-- SaveLoad widget -->
  <div class="h-100 w-100 d-flex flex-column">
    <!-- Header container -->
    <div
      class="btn-toolbar mb-1 w-100 d-flex flex-row-reverse"
      style="height:40px;"
      role="toolbar"
    >
      <!-- Save patrol button -->
      <button
        type="button"
        class="btn btn-success h-100"
        style="align-items: center; width:125px; min-width:125px;"
        @click="addPatrolToPatrolList()"
      >
        Save patrol
      </button>
      <!-- Patrol name input -->
      <div
        class="h-100 w-auto text-left mr-1"
        style="flex:1;"
      >
        <input
          id="nameTextBox"
          v-model="newPatrolName"
          type="text"
          :placeholder="[[ placehold ]]"
          class="form-control h-100"
        >
      </div>
    </div>
    <!-- Patrol List container -->
    <div
      class="w-100"
      style="height: calc(100% - 40px - 0.25rem)"
    >
      <!-- Overflow container -->
      <div class="mh-100 overflow-auto">
        <!-- Patrol table -->
        <table
          id="saved-patrol-table"
          class="table table-borderless table-striped border-right border-left"
          style="text-align: center"
        >
          <!-- Header -->
          <thead
            class="text-white bg-green-sb"
          >
            <th
              class="w-50"
              style="text-align:left"
            >
              Patrols
            </th>
            <th class="w-25">
              Choose
            </th>
            <th class="w-25">
              Remove
            </th>
          </thead>
          <!-- Table body -->
          <tbody>
            <!-- Table row per patrol in list -->
            <tr
              v-for="(patrol,index) of patrolList"
              :key="patrol.Name"
              class="border-bottom"
            >
              <!-- Patrol Name -->
              <td
                class="w-50"
                style="text-align:left"
              >
                {{ patrol.Name }}
              </td>
              <!-- Select button -->
              <td class="w-25">
                <button
                  :id="'selectBtn'+index"
                  type="button"
                  class="btn btn-success p-0 m-0 border border-secondary h-100 w-50"
                  @click="selectPatrolFromList(index)"
                >
                  <img
                    src="~/open-iconic/svg/check.svg"
                    alt=""
                    style="width:12px;height:12px;"
                  >
                </button>
              </td>
              <!-- Remove button -->
              <td class="w-25">
                <button
                  :id="'removeBtn'+index"
                  type="button"
                  class="btn btn-danger p-0 m-0 border border-secondary h-100 w-50"
                  @click="removePatrolFromList(index)"
                >
                  <img
                    src="~/open-iconic/svg/trash.svg"
                    alt=""
                    style="width:12px;height:12px;"
                  >
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * Complementary module allowing to send a list of patrols (a patrol being a name
 * and a list of waypoint) to the server and manage the list form the user
 * interface application.The table contains two colomn of buttons use to delete the row they
 * are in and resend new version of the modified patrol list. The other button is used to
 * copy the waypoints of a saved patrol to the current waypoint list.
 * This component have the following dependency :
 * Bootstrap-Vue for styling.
 *
 *
 * @module widget/SaveLoad
 * @vue-prop {Object[]} waypointList - Lists the current waypoints
 * @vue-prop {Object[]} patrolList - Lists the saved waypoint lists
 * @vue-data {String} newPatrolName - Name of the current waypoint list
 * @vue-data {String} placehold - Message of the placeholder for name input textbox
 * /

/** Disabled comment documentation
 * Might use those eventually by forking jsdoc-vue-js so it can manage the author
 * and version tag correctly
 * @author Valerie Gauthier <valerie.gauthier@usherbrooke.ca>
 * @version 1.0.0
 */

export default {
  name: 'save-load',
  props: {
    waypointList: {
      type: Array,
      default: () => [],
      required: true,
    },
    patrolList: {
      type: Array,
      default: () => [],
      required: true,
    },
  },
  data() {
    return {
      newPatrolName: '',
      placehold: 'Patrol name',
    };
  },
  methods: {
    /**
     * Remove the patrol from the list, eventually this will remove on DB.
     * @method
     * @param {Number} index - Index of the element to remove.
     */
    removePatrolFromList(index) {
      this.patrolList.splice(index, 1);
    },
    /**
     * Add a patrol to the list, eventually will add on DB.
     * @method
     */
    addPatrolToPatrolList() {
      const patrol = [];
      if (this.newPatrolName === '') {
        this.placehold = 'Enter name';
      } else {
        patrol.Name = this.newPatrolName;
        patrol.waypoints = Array.from(this.waypointList);
        this.patrolList.push(patrol);
        this.newPatrolName = '';
        this.placehold = 'Patrol name   ';
        console.log(this.patrolList);
      }
    },
    /**
     * Load the selected patrol from the list.
     * @method
     * @param {Number} index - Index of the element to load.
     */
    selectPatrolFromList(index) {
      if (this.waypointList !== []) {
        console.log('overwrite plan');
        this.waypointList.splice(0, this.waypointList.length);
      } else {
        console.log(this.patrolList[index].waypoints);
      }
      console.log(this.patrolList[index]);
      this.patrolList[index].waypoints.forEach((element) => {
        this.waypointList.push(element);
      });
    },
  },
};
</script>

<style>
</style>
